<template>
  <div class="index-rightcont">
    <div class="index-rightcont-table">
      <el-table :data="tableData" style="width: 100%" border :header-cell-style="getRowClass">
        <el-table-column prop="id" label="#" min-width="10%"></el-table-column>
        <el-table-column prop="name" label="业务名称" min-width="80%"></el-table-column>

        <el-table-column label="申请须知" prop="apply1" min-width="20%">
         
            <template slot-scope="scope">
              <router-link :to = "{name: 'BaseKnow',params: {id:scope.row.id}}">
                 <el-button size="mini" @click="handleEdit1( scope.row.id)">申请须知</el-button>
              </router-link>
            </template>
          
        </el-table-column>

        <el-table-column label="业务申请" min-width="20%" prop="apply1">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit2( scope.row.id)" class="apply2">业务申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#e4e7ea";
      } else {
        return "";
      }
    },
    handleEdit1(val) {
      console.log(val);
    },
    handleEdit2(val) {
      console.log(val);
    }
  },
  beforeRouteLeave(to,from,next){
      console.log(to);
      
      next()
  },
  mounted() {
    this.$http.get("http://192.168.0.102:8080/class/findClass")
      .then(re => {
        console.log(re);
        this.tableData = re.data.data;
        console.log(this. re.data)

      })
      .catch(er2 => {
        console.log(er2);
      });
  }
};
</script>

<style lang="less" scope >
.index-rightcont {
  //margin: 15px 10px 30px 10px;
  padding: 20px;
  background-color: white;
  box-shadow: 0px 3px 6px #9c9c9c;

  .apply2 {
    background-color: #65bdf8;
    color: white;
    border-radius: 30px;
  }
  .apply2:hover {
    background-color: #65bde6;
  }
}
</style>